<template>
  <div class="dispatch-task-page">
    <span>派件作业管理</span>

    <el-card class="card">
      <el-form
        ref="form"
        :model="queryParams"
        label-position="right"
        label-width="120px"
      >
        <el-row type="flex" justify="space-between" align="middle" :gutter="20">
          <el-col>
            <el-form-item label="派件任务编号：" prop="id">
              <el-input
                v-model="queryParams.id"
                placeholder="请输入派件任务编号"
              />
            </el-form-item>
          </el-col>

          <el-col>
            <el-form-item label="订单编号：" prop="orderId">
              <el-input
                v-model="queryParams.orderId"
                placeholder="请输入订单编号"
              />
            </el-form-item>
          </el-col>

          <el-col>
            <el-form-item label="所属营业部：">
              <el-cascader
                v-model="selectOrganIdArr"
                :options="organizationOptionList"
                :props="treeDefaultProps"
                clearable
              >
                <template slot-scope="{ data }">
                  <span style="color: black">{{ data.name }}</span>
                </template>
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="start" align="middle" :gutter="20">
          <el-col :span="8">
            <el-form-item label="签收状态：" prop="signStatus">
              <el-select v-model="queryParams.signStatus" placeholder="请选择">
                <el-option
                  v-for="item in signStatusOptionList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="预计完成时间：">
              <el-date-picker
                v-model="estimatedTimeArr"
                class="date-picker"
                type="datetimerange"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="实际完成时间：">
              <el-date-picker
                v-model="actualTimeArr"
                class="date-picker"
                type="datetimerange"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="任务分配状态：" prop="assignedStatus">
              <el-select
                v-model="queryParams.assignedStatus"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in assignedStatusOptionList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8" style="margin-bottom: 22px">
            <el-button
              type="primary"
              @click="getDispatchTaskList"
            >搜索</el-button>
            <el-button plain @click="resetSearchParams">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-menu
      :default-active="activeTabIndex"
      mode="horizontal"
      background-color="#fff"
      text-color="#000"
      active-text-color="#e15536"
      style="margin-top: 20px"
      @select="handleTabSelect"
    >
      <el-menu-item index="0">全部</el-menu-item>
      <el-menu-item index="1">新任务</el-menu-item>
      <el-menu-item index="2">已完成</el-menu-item>
    </el-menu>

    <el-card class="card">
      <div slot="header" class="clearfix">
        <el-button type="primary">人工分配</el-button>
      </div>
      <!-- 表格 -->
      <el-table :data="list" style="width: 100%">
        <el-table-column
          prop="date"
          type="index"
          label="序号"
          :index="indexMethod"
        />
        <el-table-column prop="id" label="派件作业编号" width="180px" />
        <el-table-column prop="orderId" label="订单编号" />
        <el-table-column prop="agencyName" label="所在营业部" width="120px" />
        <el-table-column prop="assignedStatus" label="任务分配状态">
          <template #default="{ row }">
            <span v-if="row.assignedStatus === 2">已分配</span>
            <span v-else-if="row.assignedStatus === 3">待人工分配</span>
          </template>
        </el-table-column>
        <el-table-column prop="courierName" label="快递员姓名" />
        <el-table-column prop="courierName" label="签收状态">
          <template #default="{ row }">
            <span v-if="row.signStatus === 0">未签收</span>
            <span v-else-if="row.signStatus === 1">已签收</span>
            <span v-else-if="row.signStatus === 2">拒收</span>
          </template>
        </el-table-column>
        <el-table-column prop="courierName" label="签收人">
          <template #default="{ row }">
            <span v-if="row.signRecipient === 1">本人</span>
            <span v-else-if="row.signRecipient === 2">代收</span>
          </template>
        </el-table-column>
        <el-table-column prop="estimatedStartTime" label="预计开始时间" width="180px" />
        <el-table-column prop="estimatedEndTime" label="预计完成时间" width="180px" />
        <el-table-column prop="actualEndTime" label="实际完成时间" width="180px" />
      </el-table>

      <!-- 分页 -->
      <el-row style="height: 60px" align="middle" type="flex" justify="center">
        <el-pagination
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="counts"
          layout="total, prev, pager, next"
          @current-change="handlePageChange"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getOrganizationTreeList } from '@/api/organization'
import { getDispatchTaskList } from '@/api/dispatch-task'
import { calItemNum } from '@/utils/page'

export default {
  name: 'PickUpTaskPage',
  data() {
    return {
      // 当前选中的Tab
      activeTabIndex: '0',
      // 机构下拉列表
      organizationOptionList: [],
      // 树形结构的字段映射配置
      treeDefaultProps: {
        // 是否严格的遵守父子节点不互相关联
        checkStrictly: true,
        label: 'name',
        children: 'children',
        value: 'id'
      },
      // 签收状态
      signStatusOptionList: [
        {
          label: '全部',
          value: null
        },
        {
          label: '已签收',
          value: 1
        },
        {
          label: '已拒收',
          value: 2
        }
      ],
      // 任务分配状态下拉列表
      assignedStatusOptionList: [
        {
          label: '全部',
          value: null
        },
        {
          label: '已分配',
          value: 2
        },
        {
          label: '待人工分配',
          value: 3
        }
      ],
      // 预计完成时间数组
      estimatedTimeArr: [],
      // 实际完成时间数组
      actualTimeArr: [],
      // 选择的营业部Id数组
      selectOrganIdArr: [],
      queryParams: {
        // 任务编号
        id: '',
        // 订单Id
        orderId: '',
        // 营业部Id
        agencyId: '',
        // 签收状态
        signStatus: null,
        // 最大预计完成时间
        minEstimatedEndTime: '',
        // 最小预计完成时间
        maxEstimatedEndTime: '',
        // 最小实际完成时间
        minActualEndTime: '',
        // minActualEndTime
        maxActualEndTime: '',
        // 实际完成时间
        actualTime: '',

        // 任务分配状态
        assignedStatus: null,
        // 任务类型，1为取件任务，2为派件任务
        taskType: 2,
        // 页码
        page: 1,
        // 一页多少条
        pageSize: 5
      },
      // 线路列表
      list: [],
      // 总条数
      counts: 0
    }
  },
  created() {
    this.getOrganizationTreeList()
    this.getDispatchTaskList()
  },
  methods: {
    // 计算序号
    indexMethod(index) {
      return calItemNum(
        index,
        this.queryParams.page,
        this.queryParams.pageSize
      )
    },
    // 处理Tab切换
    handleTabSelect(key, keyPath) {
      this.activeTabIndex = key
      // 重置为第一页
      this.queryParams.page = 1
      // 全部，不设置状态
      if (key === '0') {
        this.queryParams.status = null
      } else {
        // 更新状态
        this.queryParams.status = key
      }
      // 重新发起请求
      this.getDispatchTaskList()
    },
    // 获取机构树形列表
    async getOrganizationTreeList() {
      const result = await getOrganizationTreeList()
      console.log(result)
      const dataJson = result.data
      // 解析JSON为树形数据
      this.organizationOptionList = JSON.parse(dataJson) || []
    },
    // 获取取派件列表
    async getDispatchTaskList() {
      // console.log(`预计完成时间：${this.estimatedTimeArr}`)
      // console.log(`实际完成时间：${this.actualTimeArr}`)

      // 处理预计完成时间
      this.queryParams.minEstimatedEndTime = this.estimatedTimeArr
        ? this.estimatedTimeArr[0]
        : null
      this.queryParams.maxEstimatedEndTime = this.estimatedTimeArr
        ? this.estimatedTimeArr[1]
        : null
      // 处理实际完成时间
      this.queryParams.minActualEndTime = this.actualTimeArr
        ? this.actualTimeArr[0]
        : null
      this.queryParams.maxActualEndTime = this.actualTimeArr
        ? this.actualTimeArr[1]
        : null
      // 处理营业部Id
      this.queryParams.agencyId = this.selectOrganIdArr
        ? this.selectOrganIdArr[this.selectOrganIdArr.length - 1]
        : null

      // console.log(`上传参数 => `, this.queryParams)

      // 发起请求
      const result = await getDispatchTaskList(this.queryParams)
      console.log(result)
      // 更新数据
      this.list = result.data.items
      this.counts = +result.data.counts
    },
    resetSearchParams() {
      // 重置表单
      this.$refs.form.resetFields()
      // 重置营业部Id
      this.selectOrganIdArr = []
      this.queryParams.agencyId = ''
      // 重置预计完成时间
      this.estimatedTimeArr = []
      this.queryParams.minEstimatedEndTime = ''
      this.queryParams.maxEstimatedEndTime = ''
      // 重置实际完成时间
      this.actualTimeArr = []
      this.queryParams.minActualEndTime = ''
      this.queryParams.maxActualEndTime = ''
      // 重新发请求
      this.getDispatchTaskList()
    },
    // 处理分页切换
    handlePageChange(page) {
      this.queryParams.page = page
      this.getDispatchTaskList()
    }
  }
}
</script>

<style lang="scss" scoped>
.date-picker {
  width: 269px;
}

.dispatch-task-page {
  padding: 20px;
  background-color: #f3f4f7;
  padding-top: 23px;
  min-height: 100vh;

  .card {
    margin-top: 20px;
  }

  .blue-text {
    color: #419eff;
  }
}
</style>
